<template>
	<view class="container">
		<u-navbar title="申请入驻" :background="{ background: '#6EC9E1' }" :fixed="true" :border-bottom="false"
			title-color="#FFF" back-icon-color="#FFF">
		</u-navbar>

		<view class="card form">
			<view class="form-item">
				<span>民间爱心店名</span>
				<input type="text" v-model="sponser.name" placeholder="请输入民间爱心店名"
					placeholder-class="placeholder">
			</view>
			<u-line margin='25rpx 0'></u-line>
			<view class="form-item">
				<span>省市区</span>
				<input type="text" @click="picker=true;" v-model="region" placeholder="请选择省市区"
					placeholder-class="placeholder" :disabled="true">
			</view>
			<u-line margin='25rpx 0'></u-line>
			<view class="form-item">
				<span>详细地址</span>
				<input type="text" v-model="sponser.address" placeholder="请输入街道,小区,门牌号"
					placeholder-class="placeholder">
			</view>
			<u-line margin='25rpx 0'></u-line>
			<view class="form-item">
				<span>特色产品</span>
				<input type="text" v-model="sponser.featured_products" placeholder="请输入特色产品"
					placeholder-class="placeholder">
			</view>
			<u-line margin='25rpx 0'></u-line>
			<view class="form-item">
				<span>负责人手机号</span>
				<input type="text" v-model="sponser.contact_phone" placeholder="请输入负责人手机号"
					placeholder-class="placeholder">
			</view>
			<u-line margin='25rpx 0'></u-line>
			<view class="form-item">
				<span>开始时间</span>
				<picker mode="date" :value="sponser.starttime" :start="startDate" :end="endDate" @change="bindStartDateChange">
					<view class="uni-input">
						<input type="text" v-model="sponser.starttime" placeholder="请选择开始时间"
							placeholder-class="placeholder" :disabled="true">
					</view>
				</picker>
			</view>
			<u-line margin='25rpx 0'></u-line>
			<view class="form-item">
				<span>结束时间</span>
				<picker mode="date" :value="sponser.endtime" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">
						<input type="text" v-model="sponser.endtime" placeholder="请选择结束时间"
							placeholder-class="placeholder" :disabled="true">
					</view>
				</picker>
			</view>
		</view>
		<view class="card">
			<p>店面照片 </p>
			<view class="pre-box">
				<view class="pre-item" v-for="(item, index) in pictures" :key="index">
					<image @click.stop="previewImage(item)" class="pre-item-image" :src="item" ></image>
					<view class="remove" @click="remove(index)">
						<image src="../../static/icon/remove.png" mode="widthFix"></image>
					</view>
				</view>		
				<u-upload :custom-btn="true" :show-upload-list="false"  ref="uUpload" :action="uploadAction"
						  @on-change='upload' :max-size="5 * 1024 * 1024" max-count="6" 
						  :form-data='uploadFormData' >
						  <view slot="addBtn" class="slot-btn upload-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						  		<image src="../../static/icon/upload.png" mode="widthFix"></image>
								<view>上传图片</view>
						  </view>
				 </u-upload>
			</view>
		</view>
		<view class="card">
			<p>特色产品照片 </p>
			<view class="pre-box">
				<view class="pre-item" v-for="(item, index) in pictures2" :key="index">
					<image @click.stop="previewImage(item)" class="pre-item-image" :src="item" ></image>
					<view class="remove" @click="remove2(index)">
						<image src="../../static/icon/remove.png" mode="widthFix"></image>
					</view>
				</view>		
				<u-upload :custom-btn="true" :show-upload-list="false"  ref="uUpload" :action="uploadAction"
						  @on-change='upload2' :max-size="5 * 1024 * 1024" max-count="6" 
						  :form-data='uploadFormData' >
						  <view slot="addBtn" class="slot-btn upload-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						  		<image src="../../static/icon/upload.png" mode="widthFix"></image>
								<view>上传图片</view>
						  </view>
				 </u-upload>
			</view>
		</view>
		<view class="card ">
			<p>上传负责人身份证照片 </p>
			<view class="upload">
				<view class="left">
					<u-upload ref="uUpload" :custom-btn="true" :show-progress='false' image-mode='widthFix'
						@on-change="idcard_front_img" @on-remove="remove_idcard_front_img" :size-type="['compressed']"
						name="file" width="254" height="190" :form-data="uploadFormData" :action="uploadAction"
						:max-count="1" :file-list="avatarFileList">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image
								:src="sponser.idcard_front?sponser.idcard_front:'../../static/img/uploadImg.png'"
								mode=""></image>
						</view>
					</u-upload>
					<p>身份证正面</p>
				</view>
				<view class="right">
					<u-upload image-mode='widthFix' :custom-btn="true" :show-progress='false' ref="uUpload"
						@on-change="idcard_feverse_img" @on-remove="remove_idcard_feverse_img"
						:size-type="['compressed']" name="file" width="254" height="190" :form-data="uploadFormData"
						:action="uploadAction" :max-count="1" :file-list="avatarFileList">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image
								:src="sponser.idcard_back?sponser.idcard_back:'../../static/img/uploadImg.png'"
								mode=""></image>
						</view>
					</u-upload>
					<p>身份证反面</p>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="">
				<view class="e">营业执照</view>
				<view class="upload">
				<u-upload image-mode='widthFix' :custom-btn="true" :show-progress='false' ref="uUpload"
					@on-change="lisense_img" @on-remove="remove_lisense_img"
					:size-type="['compressed']" name="file" width="254" height="190" :form-data="uploadFormData"
					:action="uploadAction" :max-count="1" :file-list="avatarFileList">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image style="width: 80px;filter: blur(1px)"
							:src="sponser.lisense?sponser.lisense:'../../static/img/uploadImg2.png'"
							mode="widthFix"></image>
					</view>
				</u-upload>
				</view>
			</view>

		</view>
		<view class="next" @click="save()">提交</view>
		<u-toast ref="uToast" />
		<u-picker v-model="picker" mode="region" :value="pickerValue" @confirm='confirmPicker()' @cancel='cancelPicker()'></u-picker>
		
	</view>
</template>

<script>
	import {
		applySponser
	} from '@/api/index.js'
	export default {
		data() {
			return {
				sponser: {},
				pictures:[],
				pictures2:[],
				pickerValue:[],
				picker:false,
				datepicker:false,
				region:"",
				uploadAction: '',
				uploadFormData: new Object(),
			}
		},
		onLoad() {
			this.uploadAction = this.ws.upload
			this.init()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			init() {
				// getUserInfo({
				// 	'user_id': this.ws.getUserInfo().user_id
				// }).then(res => {
				// 	if (res.code) {
				// 		this.userInfo = res.data.info
				// 	} else {
				// 		this.$refs.uToast.show({
				// 			title: res.msg,
				// 			type: 'error '
				// 		})
				// 	}
				// })
			},
			bindStartDateChange: function(e) {
				this.sponser.starttime = e.detail.value
				this.$forceUpdate();
			},
			bindEndDateChange: function(e) {
				this.sponser.endtime = e.detail.value
				this.$forceUpdate();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			confirmPicker(e) {
				console.log(e)
				this.region = e.province.label + e.city.label + e.area.label
				this.pickerValue = [e.province.value,e.city.value,e.area.value];
				this.sponser.province = e.province.value;
				this.sponser.city = e.city.value;
				this.sponser.area = e.area.value;
				this.$forceUpdate();
			},
			confirmDate(e){
				console.log(e)
			},
			cancelDate(){
				
			},
			save() {
				if (!this.sponser.name) {
					this.$refs.uToast.show({
						title: '缺少店名',
						type: 'error '
					})
					return
				};
				if (!this.sponser.starttime) {
					this.$refs.uToast.show({
						title: '缺少开始时间',
						type: 'error '
					})
					return
				};
				if (!this.sponser.endtime) {
					this.$refs.uToast.show({
						title: '缺少结束时间',
						type: 'error '
					})
					return
				};
				// 创建两个日期对象
				let date1 = new Date(this.sponser.starttime);
				let date2 = new Date(this.sponser.endtime);
				
				// 计算两个日期之间的天数差
				let timeDiff = Math.abs(date2.getTime() - date1.getTime());
				let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
				if(diffDays>60){
					this.$refs.uToast.show({
						title: '时间区间不能超过两个月',
						type: 'error '
					})
					return
				}
				if(!this.region || !this.sponser.address){
					this.$refs.uToast.show({
						title: '地址不能为空',
						type: 'error '
					})
					return
				}
				this.sponser.region = this.region;
				if (this.pictures.length<1) {
					this.$refs.uToast.show({
						title: '店内照片为空',
						type: 'error '
					})
					return
				};
				this.sponser.pictures = this.pictures;
				this.sponser.pictures2 = this.pictures2;
				if (!this.sponser.idcard_front) {
					this.$refs.uToast.show({
						title: '缺少身份证正面',
						type: 'error '
					})
					return
				};
				if (!this.sponser.idcard_back) {
					this.$refs.uToast.show({
						title: '缺少身份证反面',
						type: 'error '
					})
					return
				};
				applySponser(this.sponser).then(res => {
					if (res.code) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
						uni.redirectTo({
							url: '/pages/center/sponser'
						})
					} else {
						this.$refs.uToast.show({
							title: '提交失败' + res.msg,
							type: 'error '
						})
					}
				
				})
			},
			rule() {
				this.isIdCard = /^([1-9]\d{5})(\d{4})(\d{2})(\d{2})(\d{3})(\d|X)$/.test(this.sponser.idcard)
			},
			rulex() {
				this.isBankCard = /^\d{16,19}$/.test(this.userInfo.idcard)
			},
			avatarOnSuccess: function(data, src) {
				return this.ws.imgUrl(data.data.fullurl)

			},
			idcard_front_img: function(res, index, lists) {
				res = JSON.parse(res.data);
				if (res.code == 1) {
					this.sponser.idcard_front = this.avatarOnSuccess(res)
				}
			},
			remove_idcard_front_img() {
				this.userInfo.idcard_front_img = ''
			},
			idcard_feverse_img: function(res, index, lists) {
				res = JSON.parse(res.data);
				if (res.code == 1) {
					this.sponser.idcard_back = this.avatarOnSuccess(res)
				}

			},
			remove_idcard_feverse_img() {
				this.sponser.idcard_back = ''
			},
			// 上传成功回调
			upload(res, index, lists, name){
				res = JSON.parse(res.data);
				if(!this.pictures){
					this.pictures = [];
				}
				this.$set(this.pictures,this.pictures.length,res.data.fullurl)
			},
			// 上传成功回调
			upload2(res, index, lists, name){
				res = JSON.parse(res.data);
				if(!this.pictures2){
					this.pictures2 = [];
				}
				this.$set(this.pictures2,this.pictures2.length,res.data.fullurl)
			},
			// 放大预览
			previewImage(url){
				uni.previewImage({
					urls: [url],
				})
			},
			// 删除
			remove(index){
				this.$delete(this.pictures,index)
			},
			remove2(index){
				this.$delete(this.pictures2,index)
			},
			lisense_img: function(res, index, lists) {
				res = JSON.parse(res.data);
				if (res.code == 1) {
					this.sponser.lisense = this.avatarOnSuccess(res)
				}
			},
			remove_lisense_img() {
				this.sponser.lisense = ''
			}
		}
	}
</script>

<style lang="less">
	.upload-btn{
		border-radius: 8.5px;
		border: 1rpx dashed  #b4b4b4;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-flow: column;
		align-items: center;
		height: 80px;width: 80px;
		image{
			width: 35px;
			margin-bottom: 10px;
		}
	}
	.pre-box{
		padding: 20rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		.pre-item{
			width: 33.3%;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.remove{
				position: absolute;
				z-index: 99;
				left:calc((100% - 100px)/2 + 83px);
				top: 0;
				width: 20px;height: 20px;
				image{
					width: 17px;
				}
			}
		}
		.pre-item-image {
			width: 100px;
			height: 100px;
			border-radius: 8.5px;
		}
	}
	.container {
		background: url('../../static/img/mine/header-bg.png');
		background-size: 100% 30vh;
		background-repeat: no-repeat;
		padding: 30rpx;
		background-color: #EEE;
		font-family: Microsoft JhengHei;
		font-size: 14px;
	
		.next {
			width: 90%;
			margin:30px auto;
			border-radius: 30px;
			color: #FFF;
			text-align: center;
			line-height: 50px;
			height: 50px;
			background-color: #6EC9E1;
		}

		.form {
			width: 100%;

			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				input {
					padding-right: 20rpx;
					text-align: right;
				}

				.placeholder {
					display: flex;
					justify-content: flex-end;
				}
			}
		}

		.card {
			margin-top: 20rpx;
			background-color: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
		}

		.upload {
			display: flex;
			justify-content: space-around;
			text-align: center;
			padding: 20rpx 0;

			image {
				height: 190rpx;
				width: 254rpx;
				margin: 10rpx;
			}

			.image {
				height: 360rpx !important;
				width: 300rpx !important;
			}
		}


	}
</style>